<template>
  <div class="app-container">
    <el-form :model="trialInfo" :rules="trialInfoRules" ref="trialInfoRef" size="small"
             label-width="68px">
      <el-row>
        <el-col :span="6">
          <el-form-item label="国家" prop="country">
            <el-select v-model="trialInfo.country" filterable placeholder="请选择国家" size="small">
              <el-option v-for="(item,index) in countryList" :key="index" :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6" v-if="trialInfo.country == 'AU' ">
          <el-form-item label="邮编" prop="zipCode">
            <el-input v-model="trialInfo.zipCode" type="text" placeholder="请输入国家邮编" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="长度" prop="length">
            <el-input v-model="trialInfo.length" type="number"
                      placeholder="请输入货物长度（单位：cm）"
                      clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="宽度" prop="width">
            <el-input v-model="trialInfo.width" type="number"
                      placeholder="请输入货物宽度（单位：cm）"
                      clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="高度" prop="height">
            <el-input v-model="trialInfo.height" type="number"
                      placeholder="请输入货物高度（单位：cm）"
                      clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="重量" prop="weight">
            <el-input v-model="trialInfo.weight" type="number"
                      placeholder="请输入货物重量（单位：g）"
                      clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="类型" prop="type">
            <el-select v-model="trialInfo.type" placeholder="请选择货物类型" size="small">
              <el-option v-for="(item,index) in dict.type.erp_product_template" :key="index" :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" @click="getTrialList" size="small">运费试算</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!--    <div style="margin-left: 100px">-->
    <!--      <div class="mb20" v-if="price">-->
    <!--        价格：<span style="color: red">{{ price }}</span>-->
    <!--      </div>-->
    <!--    </div>-->

    <el-table :data="logisticsList" align="center" style="width: 100%" border>
      <el-table-column prop="logisticsServiceName" label="运输方式名称" align="center" width="200"></el-table-column>
      <el-table-column prop="transportTime" label="参考运输时效" align="center" width="160"></el-table-column>
      <el-table-column prop="freight" label="预估运费" align="center"></el-table-column>
      <el-table-column prop="warehouseName" align="center" label="仓库名称" width="200"></el-table-column>
      <el-table-column prop="warehouseContacts" align="center" label="收件人" width="160"></el-table-column>
      <el-table-column prop="warehouseAddress" align="center" label="交货地址" min-width="300"></el-table-column>
    </el-table>
    <!--    <logisticsTable v-if="isOpenFreightTrial" :isOpenFreightTrial="isOpenFreightTrial"-->
    <!--                    :logisticsInfo="trialInfo" @logisticsSwitch="closeOnlineLogistics"></logisticsTable>-->
  </div>
</template>

<script>
import {calculateFreight, getCountryList} from "@/api/gather/collectProduct";
import logisticsTable from "@/views/gather/components/logistics-table.vue";
import {logisticsServiceQuery} from "@/api/order/purchaser";

export default {
  name: "freight-trial",
  dicts: ['erp_product_template'],
  components: {
    logisticsTable
  },
  data() {
    return {
      countryList: [],//国家列表
      trialInfo: {},
      trialInfoRules: {
        country: [{required: true, message: '国家不能为空', trigger: 'change'}],
        length: [{required: true, message: '长度不能为空', trigger: 'blur'}],
        width: [{required: true, message: '宽度不能为空', trigger: 'blur'},],
        height: [{required: true, message: '高度不能为空', trigger: 'blur'},],
        weight: [{required: true, message: '重量不能为空', trigger: 'blur'},],
        type: [{required: true, message: '类型不能为空', trigger: 'change'},],
      },
      isOpenFreightTrial: false,//是否打开运费试算表格
      price: "",
      logisticsList: []
    }
  },
  created() {
    this.getCountryList()
  },
  methods: {
    getTrialList() {
      logisticsServiceQuery(this.trialInfo).then(response => {
        // this.$message.info(response.msg)
        this.logisticsList = response.data
      })
    },
    closeOnlineLogistics(e) {
      this.isOpenFreightTrial = e
    },
    // 获取国家列表
    getCountryList() {
      getCountryList().then(res => {
        // this.countryList = res.data
        for (let i = 0; i < res.data.length; i++) {
          this.countryList.push({
            label: res.data[i].value,
            value: res.data[i].lable
          })
        }
      })
    },
    // 运费试算
    confirmTrialInfo() {
      this.$refs['trialInfoRef'].validate((valid) => {
        if (valid) {
          this.isOpenFreightTrial = true
          // calculateFreight(this.trialInfo).then(res => {
          //   this.price = res.data
          // })
        }
      });

    }
  }
}
</script>

<style scoped>

</style>
